<template>
  <view class="pet-type-container">
		<view style="height: 100px;"></view>
		<view class="back-btn" @click="goBack">
			<text class="tn-icon-left"></text>

		</view>
			<view class="title">
				<view>您家宝贝的</view>
				<view>
					物种是?
				</view>
			</view>
    <view class="pet-grid">
      <view class="pet-card" :class="{active: selected==='cat'}" @click="select('cat')">
        <image class="pet-icon" src="/static/image/mao2.png" mode="widthFix" />
        <view class="pet-label">猫</view>
      </view>
      <view class="pet-card" :class="{active: selected==='dog'}" @click="select('dog')">
        <image class="pet-icon" src="/static/image/gou.png" mode="widthFix" />
        <view class="pet-label">狗</view>
      </view>
      <view class="pet-card" :class="{active: selected==='rabbit'}" @click="select('rabbit')">
        <image class="pet-icon" src="/static/image/tu.png" mode="widthFix" />
        <view class="pet-label">兔子</view>
      </view>
      <view class="pet-card" :class="{active: selected==='hamster'}" @click="select('hamster')">
        <image class="pet-icon" src="/static/image/shu.png" mode="widthFix" />
        <view class="pet-label">鼠</view>
      </view>
    </view>
		<view class="indicator">
			<view class="dot"></view>
			<view class="dot1"></view>
			<view class="dot"></view>
		</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selected: 'cat',
      type:''
    }
  },
  onLoad(options) {
   this.type = options.type
  },  
	methods: {
		goBack() {
			uni.navigateBack()
		},
    select(type) {
      if (this.type == 'login') {
        uni.navigateTo({ url: './userinfo?type=' + this.type })
      } else {
        uni.navigateTo({ url: './face/index' })

      }
    }
  }
}
</script>

<style scoped lang="scss">
.indicator {
	position: fixed;
	bottom: 100rpx;
	right: 350rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 40rpx;
	.dot1 {
	width: 23rpx;
	height: 13rpx;
	border-radius: 30%;
	background: #079a3e;
	margin: 0 5rpx;
	transition: background 0.2s;
}

.dot {
	width: 13rpx;
	height: 13rpx;
	border-radius: 50%;
	background: #e0e0e0;
	margin: 0 5rpx;
	transition: background 0.2s;
}
}
.back-btn {
	position: absolute;
	top: 52rpx;
	left: 24rpx;
	z-index: 10;
	font-size: 40rpx;
	color: #222;
	padding: 10rpx;
}

.title {
	font-size: 46rpx;
	font-weight: bold;
	margin-left: 32rpx;
	margin-bottom: 60rpx;
	color: #111;
}

.pet-type-container {
  min-height: 100vh;
  background: #fff;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.pet-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #111;
  margin: 48rpx 0 32rpx 24rpx;
  text-align: left;
  align-self: flex-start;
  line-height: 1.4;
}
.pet-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 34rpx;
  padding: 0 18rpx;
  margin-top: 16rpx;
}
.pet-card {
  background: #fafafa;
  border-radius: 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 420rpx;
  box-shadow: 0 2rpx 16rpx rgba(0,0,0,0.04);
  transition: background 0.2s, color 0.2s;
}
.pet-card.active {
  background: #111;
  color: #fff;
}
.pet-card.active .pet-label {
  color: #fff;
}
.pet-icon {
  width: 72rpx;
  height: 72rpx;
  margin-bottom: 18rpx;
}
.pet-label {
  font-size: 30rpx;
  color: #222;
  margin-top: 8rpx;
  transition: color 0.2s;
}
</style>
